<template>
  <div class="home-content">
    <!-- 首行：轮播图、公告、校级活动 -->
    <el-row :gutter="20" class="top-section">
      <el-col :span="12">
        <el-carousel height="400px" class="carousel-wrapper">
          <el-carousel-item v-for="item in rotatePic" :key="item.id">
            <el-image :src="item.pic" fit="cover" class="carousel-img">
              <div slot="error" class="image-error">加载失败</div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      
      <el-col :span="12">
        <el-row :gutter="20">
          <!-- 公告栏 -->
          <el-col :span="12" class="notice-col">
            <el-card class="box-card">
              <div slot="header" class="card-header">
                <i class="el-icon-mic"></i>
                <span>最新公告</span>
              </div>
              <div class="notice-list">
                <div v-for="item in Notice" :key="item.id" class="notice-item">
                  <el-link 
                    class="link-item"
                    :underline="false"
                    @click="viewDetail(item.id)">
                    <span class="link-title">{{ item.name }}</span>
                    <span class="link-time">{{ formatDate(item.createTime) }}</span>
                  </el-link>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 校级活动 -->
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="card-header">
                <i class="el-icon-star-on"></i>
                <span>校级活动</span>
              </div>
              <div class="activity-list">
                <div v-for="item in SActList" :key="item.id" class="activity-item">
                  <el-link 
                    class="link-item"
                    :underline="false"
                    @click="viewDetail(item.id)">
                    <div class="activity-info">
                      <div class="act-title">{{ item.name }}</div>
                      <div class="act-time">{{ formatDate(item.createTime) }}</div>
                    </div>
                  </el-link>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 院级活动 -->
    <el-card class="college-act">
      <div slot="header" class="card-header">
        <i class="el-icon-office-building"></i>
        <span>院级活动</span>
      </div>
      <el-row :gutter="20">
        <el-col 
          v-for="item in DActList" 
          :key="item.id" 
          :xs="12" 
          :sm="8" 
          :md="6"
          class="act-col">
          <el-card shadow="hover" class="act-card">
            <el-image 
              :src="item.image1" 
              fit="cover" 
              class="act-image"
              @click="viewDetail(item.id)">
              <div slot="error" class="image-error">加载失败</div>
            </el-image>
            <div class="act-desc">
              <div class="act-name">{{ item.name }}</div>
              <div class="act-time">{{ formatDate(item.createTime) }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>


<script>
import axios from 'axios';
export default {
  data() {
    return {
      rotatePic: [
        { id: 1, pic: require("@/assets/rotatePic1.jpg") },
        { id: 2, pic: require("@/assets/rotatePic2.jpg") },
        { id: 3, pic: require("@/assets/rotatePic3.jpg") },
        { id: 4, pic: require("@/assets/rotatePic4.jpg") }
      ],
      Notice:[],
      SActList:[],
      DActList:[],
    }
  },
  mounted() {
    this.generateNoticeList();
    this.generateSActList();
    this.generateDActList();
  },
  methods: {
    async generateNoticeList() {
      const res = await axios.get('http://localhost:8080/NoticeNameAndTime')
      if(res.data.code == 1){
        this.Notice = res.data.data;
      }
    },
    async generateSActList() {
      const res = await axios.get('http://localhost:8080/SActNameAndTime')
      if(res.data.code == 1){
        this.SActList = res.data.data;
      }
    },
    async generateDActList() {
      const res = await axios.get('http://localhost:8080/DActNameAndTime')
      if(res.data.code == 1){
        this.DActList = res.data.data;
      }
    },
    formatDate(time) {
      return new Date(time).toLocaleDateString();
    },
    viewDetail(id) {
      this.$emit('viewDetail',id);
      
    }
  }
}
</script>

<style lang="scss" scoped>
.home-content {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.top-section {
  margin-bottom: 30px;
  .el-col-12 {
    height: 400px; /* 与轮播图高度同步 */
  }
}



// 轮播图样式
.carousel-wrapper {
  height: 400px; /* 确保轮播图高度 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .carousel-img {
    width: 100%;
    height: 100%;
  }
}

// 公共卡片样式
.box-card {
  height: 100%; /* 继承父容器高度 */
  display: flex;
  flex-direction: column;
  
  /* 调整Element UI默认样式 */
  ::v-deep .el-card__body {
    flex: 1;
    overflow: hidden; /* 隐藏内部滚动外的溢出 */
    padding: 15px !important;
  }
}

// 公告列表样式
.notice-list {
  height: 100%;
  overflow-y: auto;
  .notice-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border: none;
    }
    
    .link-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .link-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .link-time {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
  }
}

// 校级活动样式
.activity-list {
  height: 100%;
  overflow-y: auto;
  
  .activity-item {
    margin: 10px 0;
  }
}

// 院级活动样式
.college-act {
  .act-col {
    margin-bottom: 20px;
  }
  
  .act-card {
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .act-image {
      width: 100%;
      height: 180px;
      border-radius: 4px;
    }
    
    .act-desc {
      padding: 10px;
      
      .act-name {
        font-size: 14px;
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .act-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}
</style>